<template>
  <div class="login-box">
    <div class="bg"></div>
    <div class="login-main">
      <div class="clearfix form-main">
        <div class="logo"><img src="../images/common/logo.png"></div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="form.mobile"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password"></el-input>
          </el-form-item>
        </el-form>
        <div class="submit">
          <button type="primary" @click="onSubmit">登录</button>
        </div>
        <div class="miss">
          <span><router-link to='/forget'>忘记密码</router-link></span>
          <span><router-link to='/register'>前往注册</router-link></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { login } from 'api'
export default {
  data() {
    return {
      
      geetestId: 'geetestId' + 123,
      form: {
        mobile: "",
        password: ""
      }
    }
  },
  mounted() {
  
  },
  methods: {
    onSubmit() {
      if(this.form.mobile==''){
        this.$message({
          message:"请填写手机号码"
        })
        return false;
      }
      this.$promise.post(login,this.form).then(resp=>{
        if(resp.status==1){
          Cookies.set(SESSION_KEY, resp.token.token, {
							domain: SESSION_DOMAIN,
							expires: resp.token.expiresIn
					})
          this.$router.replace({path:"list"})
        }else{
          this.$message({
            message:resp.msg,
            type:"error"
          })
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
  .login-box .logo{
    text-align: center;
    margin-bottom: 20px;
  }
  .login-box .logo img{
    max-width: 60%;
  }
.login-box {
  width: 100%;
  height: 100%;
  background: url("../images/bg.jpg") no-repeat;
  background-size: cover;
  position: fixed;
  .bg{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height:100%;
    background-color: #000;
    opacity: .5;
  }
  .login-main {
    position: absolute;
    width: 80%;
    max-width: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius:10px;
  }
  .form-main {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
  }
  .miss{
    font-size: 12px;
    color: #0568c5;
    text-align: center;
    margin-top: 20px;
  }
  .miss a{
    font-size: 12px;
    color: #ccc;
    text-align: center;
    margin: 0 10px;
  }
  .miss a:hover{
    color: #0568c5;
  }
  .submit{
    text-align: center;
  }
  .submit button{
    display: inline-block;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background-color: #0568c5;
    color: #fff;
    border: none;
    width: 60%;
    outline: none;
    border-radius:5px;
    font-size:16px;
  }
}
</style>

